<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
            user-select: none !important;
        }
        body{
            background-color:rgb(1, 1, 12);
            margin: 10px;
        }
        #main{
            position: relative;
            width: 300px;
            min-height: 400px;
            border: 1px solid #300;
            background-color: green !important;
            margin: 50px 50px;
            border-radius: 10px;

        }
        
        .allScreen{
            display:grid;
            grid-template-rows: 20px 50px auto;
            
            
            height: 120px;
            background-color: rgba(255, 255, 255, 0.438);
        }
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 5px;
            background-color: #2196F3;
            padding: 10px;
        }
        .grid-container>div {
            background-color: rgba(172, 218, 66, 0.205);
            color: rgb(7, 0, 0);
            text-align: center;
            font-size: large;
            
            padding: 20px 0px;
            border-radius: 10px;
            box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);  

        }
        .grid-container>div:hover{
            background-color: red;
            cursor: pointer;
        } 
        .grid-container>div:active{
            background-color: black;
        } 
        

        .add{
            grid-row: 2/4;
            grid-column: 4;
        }
        .eq{
            grid-row: 4/ span 2;
            grid-column: 4;
        }
        .item0{
            grid-column:1/3
        }
        .allScreen>div {
            border:1px solid black;
        }
      
    </style>
</head>
<body>
    <div id="main">
        <div class="allScreen">
            <div class="screen" id="row1">DEC</div>
            <div class="screen" id="row2"></div>
            <div class="screen" id="row3"></div>
        </div>
        <div class="grid-container">
            <div class="clear" onclick="clr()">C</div>
            <div class="multip" onclick="show('*')">*</div>
            <div class="divide" onclick="show('/')">/</div>
            <div class="remove">-</div>
            
            <div class="item1" onclick="show('1')">1</div>
            <div class="item2" onclick="show('2')">2</div>
            <div class="item3" onclick="show('3')">3</div>
            <div class="add" onclick="show('+')">+</div>

            <div class="item4" onclick="show('4')">4</div>
            <div class="item5" onclick="show('5')">5</div>
            <div class="item6" onclick="show('6')">6</div>
            <div class="item7" onclick="show('7')">7</div>
            <div class="item8" onclick="show('8')">8</div>  
            <div class="item9" onclick="show('9')">9</div>
            <div class="eq" onclick="equl()">=</div>
            <div class="item0" onclick="show('0')">0</div>
            <div class="dot" onclick="show('.')">.</div>
           
        </div>
    </div>
    <script type="text/javascript">
       function show(num) {
        var result = document.getElementById('row3');
        result.innerText += num;
       }
       function equl(){
        var result = document.getElementById('row3');
        var showResult = document.getElementById('row2');
        showResult.innerText=eval(result.innerText);
        result.innerText=null;
       }
       function clr(){
        document.getElementById('row3').innerText=null;
        document.getElementById('row2').innerText=null;
       }
    </script>
</body>
</html>